<template>
  <pageHeader title="编辑采购申请" :breadCrumb="breadCrumb" :show-back="true">
    <template #footer
      ><a-space v-if="demand.info.state === 1">
        <a-button @click="router.back()">
          <template #default>取消</template> </a-button
        ><a-button type="primary" @click="save"> 提交 </a-button></a-space
      >
    </template>
    <div class="title">
      <h1>采购申请表</h1>
    </div>
    <div style="display: flex">
      <div class="form-item">
        <div class="title-item">
          <a-space style="margin-left: 40px">
            <div
              style="
                width: 5px;
                height: 23px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            ></div>
            <div>基本信息</div></a-space
          >
        </div>
        <div class="demand-index">
          <a-form
            ref="form"
            :model="demand.info"
            autoLabelWidth
            :layout="(layout as Tlayout)"
          >
            <a-row :gutter="16">
              <a-col
                v-for="item in demandForm?.info?.design?.form"
                :key="item.id"
                :span="item.span"
              >
                <FormItem
                  :name="item.name"
                  :componentType="item.componentType"
                  v-model:props="item.props"
                  :required="item.required"
                  :disabled="item.disabled"
                  v-model:values="item.values"
                />
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
    </div>

    <div
      v-if="
        demand.info.state === 4 ||
        demand.info.state === 6 ||
        demand.info.state === 7
      "
    >
      <div class="title-item">
        <a-space style="margin-left: 40px">
          <div
            style="
              width: 5px;
              height: 23px;
              background-color: rgba(61, 126, 255, 1);
              border: none;
              border-radius: 2px;
            "
          ></div>
          <div>执行信息</div></a-space
        >
      </div>
      <div style="width: 95%; margin: 10px auto">
        <TableTurn
          :table-data="getData"
          ref="tableRef"
          :args="args"
          :is-show-pagination="false"
        >
          <a-table-column :width="80" align="center">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            title="物料类型"
            :width="150"
            dataIndex="materialName"
            align="center"
          ></a-table-column>
          <a-table-column
            title="物料编码"
            :width="150"
            dataIndex="number"
            align="center"
          ></a-table-column>
          <a-table-column
            title="物料名称"
            :width="150"
            dataIndex="name"
            align="center"
          ></a-table-column>
          <a-table-column
            title="规格型号"
            :width="150"
            dataIndex="spec"
            align="center"
          ></a-table-column>
          <a-table-column
            title="采购单位"
            :width="150"
            dataIndex="basicName"
            align="center"
          ></a-table-column>
          <a-table-column
            title="需求数量"
            :width="150"
            dataIndex="amount"
            align="center"
          ></a-table-column>
          <a-table-column title="需求交付日期" :width="150" align="center"
            ><template #cell="{ record }">
              {{ dayjs(record.deliveryTime).format('YYYY-MM-DD') }}
            </template></a-table-column
          >
          <a-table-column title="状态" :width="150" align="center"
            ><template #cell="{ record }">
              <a-typography-text v-if="record.state === 1">
                待派工
              </a-typography-text>
              <a-typography-text v-if="record.state === 2" type="primary">
                执行中
              </a-typography-text>
            </template></a-table-column
          >
          <!-- <a-table-column
          title="关联任务单号"
          :width="150"
          dataIndex="taskNumber"
          align="center"
        >
          <template #cell="{ record }">
            <a-typography-text v-if="!record.taskNumber" disabled>
              无
            </a-typography-text>
            <a-typography-text v-else type="primary">
              {{ record.taskNumber }}
            </a-typography-text>
          </template>
        </a-table-column>
        <a-table-column
          title="关联采购订单号"
          :width="150"
          dataIndex="orderNumber"
          align="center"
        >
          <template #cell="{ record }">
            <a-typography-text v-if="!record.orderNumber" disabled>
              无
            </a-typography-text>
            <a-typography-text v-else type="primary">
              {{ record.orderNumber }}
            </a-typography-text>
          </template>
        </a-table-column>
        <a-table-column
          title="关联计划单号"
          :width="150"
          dataIndex="planNumber"
          align="center"
        >
          <template #cell="{ record }">
            <a-typography-text v-if="!record.planNumber" disabled>
              无
            </a-typography-text>
            <a-typography-text v-else type="primary">
              {{ record.planNumber }}
            </a-typography-text>
          </template>
        </a-table-column> -->
        </TableTurn>
      </div>
    </div>
    <div v-if="demand.info.state === 6">
      <div class="title-item">
        <a-space style="margin-left: 40px">
          <div
            style="
              width: 5px;
              height: 23px;
              background-color: rgba(61, 126, 255, 1);
              border: none;
              border-radius: 2px;
            "
          ></div>
          <div>订单信息</div></a-space
        >
      </div>
      <div style="width: 95%; margin: 10px auto">
        <orderResp :tableData="orderRespData" v-if="orderRespData"></orderResp>
      </div>
    </div>
  </pageHeader>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    computed,
    onMounted,
    defineAsyncComponent,
  } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import {
    postPurchaseApply,
    getSinglePurchaseApply,
    PutPurchaseApplyList,
  } from '@/api/buy-management/buy-apply/index';
  import { getOpenTemp } from '@/api/buy-management/get-template/index';

  let orderResp = defineAsyncComponent(() => import('./order-resp/index.vue'));
  const orderRespData = ref([]);
  const router = useRouter();
  const route = useRoute();
  const layout = ref('vertical');
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
  const breadCrumb: string[] = ['采购管理', '采购管理', '采购申请详情'];

  const demand = reactive<any>({
    info: {
      number: '',
      name: '',
      applyByUser: 0,
      applyByDept: 0,
      phone: '',
      applyTime: '',
      deliveryTime: '',
      priority: 0,
      state: 0,
      cause: '',
      templateId: 0,
      flowId: 0,
      file_id: 0,
      extend: '',
      product: [],
    },
  });
  interface DemandFormType {
    info: {
      id: number;
      flowId: number;
      design: {
        form: any[];
      };
    };
  }
  const demandForm = reactive<DemandFormType>({
    info: { id: 0, flowId: 0, design: { form: [] } },
  });

  const getTemp = async () => {
    const res = await getSinglePurchaseApply({ id: route.query.id });
    orderRespData.value = res.orderResp ? res.orderResp : [];
    demand.info = res.applyData;
    demandForm.info.design.form = res.applyData.extends;
    demandForm.info.design.form.sort((a: any, b: any) => a.sort - b.sort);
    demandForm.info.design.form.forEach((item: any) => {
      if (demand.info.state > 1) item.disabled = true;
      if (item.fieldName) {
        item.values[0] = demand.info[item.fieldName];
      }
      if (item.values !== '') {
        if (item.values[0] === '') {
          item.values = [];
        }
      }
      if (item.code === 'NUMBER-UNIVERSAL') {
        item.values = [demand.info.number];
      }
      if (item.code === 'FILE') {
        item.props.data = demand.info.file;
      }
      if (item.code === 'APPLY_DETAILED') {
        item.props.data = demand.info.product;
      }
    });
  };
  getTemp();

  const visible = ref(false);
  const keys = Object.keys(demand.info);

  // 保存
  const save = async () => {
    demandForm.info.design.form.forEach((item) => {
      if (item.fieldName && keys.includes(item.fieldName)) {
        demand.info[item.fieldName] = item.values[0];
      }
      if (item.code === 'APPLY_DETAILED') {
        demand.info.product = item.props.data;
      }
      if (item.code === 'APPLY_DATE') {
        demand.info.applyTime = new Date(item.values[0]).toJSON();
      }
    });
    demand.info.product.forEach((item: any) => {
      item.deliveryTime = new Date(item.deliveryTime).toJSON();
    });
    demand.info.extend = JSON.stringify(demandForm.info.design.form);
    demand.info.deliveryTime = new Date().toJSON();
    await PutPurchaseApplyList(demand.info);
    router.back();
  };

  const getData = async () => {
    try {
      const res = await getSinglePurchaseApply({ id: Number(route.query.id) });
      return Promise.resolve(res.applyData.product);
    } catch (err: unknown) {
      console.log(err);
    }
  };
</script>

<style scoped lang="less">
  // .content-head {
  // }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }
  .demand-index {
    padding: 25px 140px;
  }
  .approve-item {
    margin: 25px auto;
    width: 30%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    // -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    // -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    height: 600px;
  }
  .form-item {
    width: 100%;
  }

  // :deep(.arco-input-wrapper),
  // :deep(.arco-input[disabled]) {
  //   -webkit-text-fill-color: black;
  // }
  // :deep(.arco-textarea[disabled]) {
  //   -webkit-text-fill-color: black;
  // }
  .box {
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid #e4e4e4;
    display: flex;
    justify-content: end;
    width: 100%;
  }
</style>
